<template>
  <div class="box">
    <div class="cai">猜你喜欢</div>
    <div class="hang">
      <span
        v-for="(item, index) in daoh"
        :key="index"
        :class="{ h1: true, active: currentIndex == index }"
        @click="handel(index)"
        >{{ item.text }}</span
      >
    </div>
    <div class="hang2">
      <span v-for="(it, ind) in daoha" :key="ind" class="h2">{{
        it.text
      }}</span>
    </div>
    <div class="rong">
      <div class="he" v-for="(i, j) in das" :key="j" @click="toDetail(i.mtWmPoiId)">
        <div class="p1"><img :src="i.picUrl" alt="" /></div>
        <div class="p2">
          <div class="ph1">
            <span>{{ i.name }}</span>
            <span class="iconfont icon-gengduo"></span>
          </div>
          <div class="ph2">
            <span class="iconfont icon-pingfen">4.5</span>
            <span>{{ i.monthSalesTip }}</span>
          </div>
          <div class="ph3">
            <span>{{ i.minPriceTip }}</span>
            <span>{{ i.shippingFeeTip }}</span>
            <span>{{ i.deliveryTimeTip }}</span>
            <span>{{ i.distance }}</span>
          </div>
          <div class="ph4">{{ i.wmPoiScore }}</div>
          <div class="ph5">
            <div class="zxc">
              <span
                v-for="(item, index) in i.discounts2"
                :key="index"
                class="cla"
                >{{ item.info }}</span
              >
            </div>
            <!-- <span class="iconfont icon-xiangxia"></span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { user_login, user_register, shop_list } from "../api/index";
export default {
  data() {
    return {
      currentIndex: 0,
      daoh: [
        { id: 1, text: "综合排序" },
        { id: 2, text: "距离最近" },
        { id: 3, text: "销量最高" },
        { id: 4, text: "筛选" },
      ],
      daoha: [
        { id: 1, text: "年货节热卖" },
        { id: 2, text: "津贴联盟" },
        { id: 3, text: "满减优惠" },
        { id: 4, text: "品质联盟" },
      ],
      das: [],
    };
  },
  methods: {
    handel(index) {
      this.currentIndex = index;
      if (index == 1) {
        this.das.sort((a, b) => {
          return parseFloat(a.distance) - parseFloat(b.distance);
        });
      } else if (index == 2) {
        this.das.sort((a, b) => {
          return (
            parseFloat(b.monthSalesTip.slice(3)) -
            parseFloat(a.monthSalesTip.slice(3))
          );
        });
      }
    },
    toDetail(id){
      this.$router.push('/xiangqing/'+id)
    }
  },
  mounted() {
    shop_list().then((res) => {
      res.data.list.forEach((item) => {
        this.das.push(item);
      });
    });
  },
};
</script>

<style scoped>
.box {
  padding: 10px 15px;
}
.cai {
  font-size: 22px;
  font-weight: bold;
}
.hang {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.h1 {
  font-size: 20px;
}
.h1.active {
  color: red;
}
.hang2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.h2 {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  background-color: #eee;
  border-radius: 3px;
}
.he {
  height: 170px;
  background-color: ghostwhite;
  margin-top: 10px;
  display: flex;
}
.p1 {
  width: 100px;
  height: 100px;
}
.p2 {
  flex: 1;
  margin-left: 10px;
}
img {
  width: 100%;
}
.ph5 {
  display: flex;
}
.ph1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ph1 span:nth-child(1) {
  font-weight: bold;
  font-size: 16px;
}
.ph2 span:nth-child(1) {
  color: red;
}
.ph2 span {
  margin-right: 20px;
}
.ph3 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.ph3 span {
  margin-right: 14px;
}
.ph3 span:nth-child(4) {
  margin-right: 0px;
}
.cla {
  display: inline-block;
  background-color: darkorange;
  border-radius: 3px;
  color: white;
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>